<script setup>
import {inject,watch } from "vue";
import _ from 'lodash'
const {setIsShow} = inject('dialog-visible')
const {setDialogUrl} = inject('dialog-url')
const {setKeywords} = inject('searchbar-keywords')

// const props = defineProps(['action'])
// const emits = defineEmits(['update:act'])

const handleClick = ()=>{
    console.log('点击事件')
    setIsShow(true)
    setDialogUrl('')
}

// 防抖动函数,当输入间隔大于500号码，执行函数
const search = _.debounce((e)=>{
    setKeywords(e.target.value)
},500)

// 对外暴露方法
defineExpose({
    handleClick
})

// watch(
//     ()=>props.action,
//     (action)=>{
//         console.log(action)
//         if(action === 'add'){
//             handleClick()
//             emits('update:act','')
//         }
//     }
// )

</script>

<template>
    <div class="search-containter">
        <div class="button" @click="handleClick">+</div>
        <div class="input">
            <input type="text" 
            placeholder="请输入关键字..."
            @keyup="search"
            >
        </div>
    </div>
</template>

<style lang="css">
    .search-containter{
        height: 60px;
        background-color: #d3d3d3;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 10px;
    }
    .button{
        width: 40px;
        height: 40px;
        background-color: #1e90ff;
        padding-left: 0;
        border-radius: 5px;
        font-size: 30px;
        font-weight: bold;
        color: white;
        text-align: center;
        cursor: default;
    }
    .input{
        flex: 1;
        height: 36px;
        padding: 0 10px; 
    }
    .input input{
        height: 100%;
        width: 100%;
        border: solid 1px #ccc;
        border-radius: 5px;
        padding: 0 10px;
        outline: none;
    }
</style>
